import { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Descriptions, MessagePlugin, Image, ImageViewer } from 'tdesign-react';
import { useTranslation } from 'react-i18next'
import { ApiRequest, apis } from '@/service'
import type { ImageViewerProps } from 'tdesign-react'
import styles from './index.module.less'

const {
  test: {
    getBugItem,
  },
} = apis.BMService

type DetailDataType = {
  bugType?: any,
  moduleName?: any,
  title?: string,
  recurrence?: string,
  desireResult?: string,
  actualResult?: string,
  image?: string,
  steps?: any,
  priority?: any,
  deadline?: string,
  processor?: any
}

const BugDetail = (props: any) => {

  const { t } = useTranslation(['bugManager'])
  const { state: { id } } = useLocation()

  const [detailData, setDetailData] = useState<DetailDataType>({})

  useEffect(() => {
    if (id) {
      getBugItemFnc()
    }
  }, [id])

  const imageViewerTrigger: ImageViewerProps['trigger'] = ({ open }) => {
    const mask = (
      <div
        style={{
          background: 'rgba(0,0,0,.4)',
          color: '#fff',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
        onClick={open}
      >
        预览
      </div>
    )
    return <Image
      src={detailData.image}
      fit={'contain'}
      style={{ width: 120, height: 120 }}
      overlayContent={mask}
      overlayTrigger="hover"
    />
  }

  const items = [
    {
      label: t('test.title'),
      content: detailData.title || '暂无数据'
    },
    {
      label: t('test.owner'),
      content: detailData.processor?.[0]?.label || '暂无数据'
    },
    {
      label: t('test.moduleName'),
      content: detailData.moduleName?.[0]?.label || '暂无数据',
    },
    {
      label: t('test.priority'),
      content: detailData.priority?.label || '暂无数据'
    },
    {
      label: t('test.bugType'),
      content: detailData.bugType?.label || '暂无数据',// 使用标签
    },
    {
      label: t('test.recurrence'),
      content: detailData.recurrence || '暂无数据'
    },
    {
      label: t('test.desireResult'),
      content: detailData.desireResult || '暂无数据'
    },
    {
      label: t('test.image'),
      content: detailData.image ? <div className={styles.image}>
        <ImageViewer trigger={imageViewerTrigger} images={detailData.image ? [detailData.image] : undefined} />
      </div> : '暂无数据'
    },
    {
      label: t('test.steps'),
      content: detailData.steps?.label || '暂无数据'
    },
    {
      label: t('test.deadline'),
      content: detailData.deadline
    },
  ]

  const getBugItemFnc = () => {
    const params = {
      id,
    }
    ApiRequest({ api: getBugItem, params }).then((res: any) => {
      const { code = -1, data = [{}], note = '' } = res
      if (code > 0) {
        setDetailData(data[0])
        // let _data = data[0]
        // console.log('data',data[0])
        // let _items = []
        // for (let key in _data) {
        //   if (key != 'id') {
        //     if (key == 'image') {
        //       let obj = {
        //         label: t(`test.${key}`),
        //         content: <img src={_data[key]}></img>
        //       }
        //       _items.push(obj)
        //     } else {
        //       let obj = {
        //         label: t(`test.${key}`),
        //         content: _data[key]
        //       }
        //       _items.push(obj)
        //     }
        //   }
        // }
        // setItems(_items.reverse())
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  return <div className={'content-wrapper'}>
    <Descriptions
      items={items}
      column={1}
      title={t("test.bugDetails")}
      bordered
    />
  </div>
}

export default BugDetail
